<template>
  <div class="categoryList">
    <scroll-view scroll-x="true" class="head" :scroll-left="srcollLeft">
      <div
        v-for="(item, index) in navData"
        :key="index"
        :class="[nowIndex===index?'active':'']"
        @click="changeTab(index,item.id)"
      >{{item.name}}</div>
    </scroll-view>
    <div class="info">
      <p>{{currentNav.name}}</p>
      <p>{{currentNav.front_desc}}</p>
    </div>
    <div class="list" v-if="goodsList.length!=0">
      <div
        class="item"
        v-for="(item, index) in goodsList"
        :key="index"
        @click="goodsDetail(item.id)"
      >
        <img :src="item.list_pic_url" alt />
        <p class="name">{{item.name}}</p>
        <p class="price">￥{{item.retail_price}}</p>
      </div>
    </div>
    <div class="none" v-else>数据库暂无数据....</div>
  </div>
</template>

<script>
import { get } from "../../utils/index";
export default {
  data() {
    return {
      navData: [],
      categoryId: "",
      currentNav: {},
      nowIndex: 0,
      goodsList: [],
      scrollLeft: 0
    };
  },
  mounted() {
    //获取页面传递的id
    this.categoryId = this.$root.$mp.query.id;
    this.getAllData();
  },
  methods: {
    async getAllData() {
      //-需要传递上一个页面跳转到这个页面传递过来的id 发送给后端
      const data = await get("/category/categoryNav", {
        id: this.categoryId
      });
      this.navData = data.navData;
      this.currentNav = data.currentNav;
      for (let i = 0; i < this.navData.length; i++) {
        const id = this.navData[i].id;
        //
        if (id == this.currentNav.id) {
          this.nowIndex = i;
        }
      }

      //获取商品
      const listData = await get("/goods/goodsList", {
        categoryId: this.categoryId
      });
      // console.log(listData);
      this.goodsList = listData.data;
    },
    async changeTab(index, id) {
      this.nowIndex = index;
      const listData = await get("/goods/goodsList", {
        categoryId: id
      });
      // console.log(listData);
      this.goodsList = listData.data;
      this.currentNav = listData.currentNav;
      //让导航栏滚动到可见区域
      if (this.nowIndex > 4) {
        this.scrollLeft = this.nowIndex * 60;
      } else {
        this.scrollLeft = 0;
      }
    },
    goodsDetail(id){
      wx.navigateTo({
        url: '/pages/goods/main?id='+id,
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./style.less");
</style>